<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../../../assets/common/common.css" />
    <link rel="stylesheet" href="../../../assets/iconfont/iconfont.css" />
    <link rel="stylesheet" href="./myMeeting.css" />
  </head>
  <body>
    <div class="myMeeting">
      <header class="top flex bg-fff aic jc-sb pl-10 pr-10">
        <a href="javascript:history.back(-1)">
          <span class="iconfont icon-xiangzuojiantou"></span>
        </a>
        <span>我的会议</span>
        <span class="fix"></span>
      </header>
      <!-- tab栏 -->
      <div class="tab bg-fff flex jc-sb f14">
        <div class="state fdc blue aic jc-sa">
          <div>
            <span onclick="metting(1);">已确认</span>
            <span>(2人)</span>
          </div>
          <div class="bluespot"></div>
        </div>
        <div class="state fdc aic jc-sa">
          <div>
            <span onclick="metting(2);">已拒绝</span>
            <span>(2人)</span>
          </div>
          <div class="bluespot dsn"></div>
        </div>
        <div class="state fdc aic jc-sa">
          <div>
            <span onclick="metting(3);">未确认</span>
            <span>(2人)</span>
          </div>
          <div class="bluespot dsn"></div>
        </div>
      </div>
      <!-- 待参加列表 -->
      <ul class="attendlist mr-20 ml-20">
        <a href="../mettingDetails/mettingDetalis.html">
          <li class="item fdc jc-sa pl-10 pr-10 mt-20 bg-fff">
            <div class="flex jc-sb fg1">
              <span class="f14">销售部季度例会</span>
              <span class="f12 base">等待确认</span>
            </div>
            <div class="f12 t-999">
              <img src="../../../assets/img/u1011.png" alt="" />
              <span class="ml-10">朝阳公园南路1号</span>
            </div>
            <div class="f12 t-999 mt-10">
              <img src="../../../assets/img/u1012.png" alt="" />
              <span class="ml-10">2022-01-02&nbsp;10:09:00</span>
            </div>
          </li>
        </a>
      </ul>

      <!-- 进行中 -->
      <ul class="attendinglist dsn mr-20 ml-20">
        <a href="../mettingDetails/mettingDetalis.html">
          <li class="item fdc jc-sa pl-10 pr-10 mt-20 bg-fff">
            <div class="flex jc-sb fg1">
              <span class="f14">销售部季度例会</span>
              <span class="f12 text">进行中</span>
            </div>
            <div class="f12 t-999">
              <img src="../../../assets/img/u1011.png" alt="" />
              <span class="ml-10">朝阳公园南路1号</span>
            </div>
            <div class="f12 t-999 mt-10">
              <img src="../../../assets/img/u1012.png" alt="" />
              <span class="ml-10">2022-01-02&nbsp;10:09:00</span>
            </div>
          </li>
        </a>
      </ul>

      <!-- 已结束 -->
      <ul class="attenderlist dsn mr-20 ml-20">
        <a href="../mettingDetails/mettingDetalis.html">
          <li class="item fdc jc-sa pl-10 pr-10 mt-20 bg-fff">
            <div class="flex jc-sb fg1">
              <span class="f14">销售部季度例会</span>
              <span class="f12 t-999">已结束</span>
            </div>
            <div class="f12 t-999">
              <img src="../../../assets/img/u1011.png" alt="" />
              <span class="ml-10">朝阳公园南路1号</span>
            </div>
            <div class="f12 t-999 mt-10">
              <img src="../../../assets/img/u1012.png" alt="" />
              <span class="ml-10">2022-01-02&nbsp;10:09:00</span>
            </div>
          </li>
        </a>
      </ul>
    </div>
  </body>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    $(".state").on("click", function () {
      $(this).addClass("blue").siblings().removeClass("blue");
      $(this).find(".bluespot").removeClass("dsn");
      $(this).siblings().find(".bluespot").addClass("dsn");
    });
    function metting(state) {
      if (state == 1) {
        $(".attendlist").removeClass("dsn").siblings().addClass("dsn");
      } else if (state == 2) {
        $(".attendinglist").removeClass("dsn").siblings().addClass("dsn");
      } else {
        $(".attenderlist").removeClass("dsn").siblings().addClass("dsn");
      }
    }
  </script>
</html>
